<template>
  <div>
    <!-- 
      v-on: 给标签绑定事件
      语法：
        v-on:事件名="要执行的少量代码"
        v-on:事件名="methods中的函数名"
        v-on:事件名="methods中的函数名(实参)"

        数据驱动视图
     -->
     <p>你要购买的商品数量：{{ count }}</p>
     <button v-on:click="count=count+1" >增加1</button>
     <button v-on:click="addFn" >增加1个</button>
     <button v-on:click="addCountFn(5)" >增加5个</button>

     <!-- 
       v-on简写 @
       语法：@事件名="methods中的函数名"
      -->
      <button @click="subCount">减少数量1</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      count: 0
    }
  },
  // methods是vue专门提供给我们声明函数的对象
  // 函数中获取变量，必须通过this来获取
  methods: {
    addFn(){
      this.count = this.count + 1;
    },
    addCountFn(num){
      this.count = this.count + num;
    },
    subCount(){
      this.count = this.count-1;
    }
  }
}
</script>

<style>

</style>